<template>
  <h2>reactive和ref的细节问题</h2>
  <h3>m1：{{m1}}</h3>
  <h3>m2：{{m2}}</h3>
  <h3>m3：{{m3}}</h3>
  <button @click="update">更新数据</button>
</template>

<script lang='ts'>
import { defineComponent, ref, reactive } from 'vue'
export default defineComponent ({
  name:'App',
  setup() {
    //通过ref的方式设置的数据
    const m1 = ref('abc');
    const m2 = reactive({
      name:'小白',
      wife:{
        name:'小红'
      }
    });
    //ref也可以传入对象吗
    //ref中如果放入的是一个对象，那么是经过了reactive的处理，形成了一个Proxy类型的对象
    const m3 = ref({
      name:'小白',
      wife:{
        name:'小红'
      }
    });
    const update = () => {
      m1.value += '===';
      m2.wife.name += '===';
      // 使用ref处理对象  ==> 对象会被自动reactive为proxy对象
      // reactive对对象进行了深度数据劫持
      m3.value.wife.name += '===';
      
      console.log(m3);
    }
    return {
      m1,
      m2,
      m3,
      update
    }
  }
})
</script>

<style>

</style>